<!-- // 明细栏 -->
<template>
    <div>

        <el-card>
            <template #header>
                <span class="title-span">API基础信息</span>
            </template>
            <!-- // 两个输入框  一个是名称  一个是描述 -->
            <el-form label-width="100">
                <el-form-item label="节点名称：">
                    <el-input v-model="props.showFlowData.data.label"></el-input>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input v-model="props.showFlowData.data.desc" type="textarea"></el-input>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API状态</span>
            </template>

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIState.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIState.type" disabled></el-input>
                </el-form-item>
            </el-form>

        </el-card>

        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API输入</span>
            </template>
            <!-- <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataOne.name"></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataOne.type"></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataOne.selectValue" >
                        <el-option v-for="(item, index) in three_data_selectList" :key="index" :label="item.data.label"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider /> -->

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataTwo.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataTwo.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataTwo.selectValue">
                        <el-option v-for="(item, index) in drawing_documents_selectList" :key="index"
                            :label="item.data.label" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />


            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataThree.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataThree.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataThree.selectValue">
                        <el-option v-for="(item, index) in drawing_sheet_selectList" :key="index"
                            :label="item.data.label" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataFour.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataFour.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataFour.selectValue" filterable  allow-create>
                        <el-option v-for="(item, index) in _font_style_list" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />


            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataFive.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataFive.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataFive.selectValue" filterable  allow-create>
                        <el-option v-for="(item, index) in _font_size_list" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataSix.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataSix.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataSix.selectValue" filterable  allow-create>
                        <el-option v-for="(item, index) in _font_style_list" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataSeven.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataSeven.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataSeven.selectValue" filterable  allow-create>
                        <el-option v-for="(item, index) in _font_size_list" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataEight.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataEight.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    X:
                    <el-input v-model="popShowData.APIInput.dataEight.x_data"
                        style="width: 70px; margin-right: 15px;"></el-input>
                    Y:
                    <el-input v-model="popShowData.APIInput.dataEight.y_data" style="width: 70px;"></el-input>
                </el-form-item>
            </el-form>
            <el-divider />

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataNine.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataNine.type" disabled></el-input>
                </el-form-item>

                <div style="display: flex; justify-content: space-around;">
                    <el-text style="font-weight: bold; width: 100px; text-align: right;">值：</el-text>
                    <el-button type="primary" @click="handleAddAttribute" style="width: 90%;"> 添加 </el-button>
                </div>
                <div>
                    <table class="table-sty">
                        <thead>
                            <tr>
                                <th style="width: 55px;">序号</th>
                                <th>标题</th>
                                <th>列宽</th>
                                <th style="width: 105px;">值</th>
                                <th style="width: 55px;">操作</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr v-for="(item, index) in popShowData.APIInput.dataNine.dataList" :key="index">
                                <td>{{ index + 1 }}</td>
                                <td><el-input v-model="item.title"></el-input></td>
                                <td><el-input v-model="item.width"></el-input></td>
                                <td><el-select v-model="item.selectValue">
                                        <el-option v-for="(item, index) in attribute_selectList" :key="index"
                                            :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </td>
                                <td>
                                    <el-button type="danger" @click="handleDeleteAttribute(item, index)" icon="delete"
                                        link style="margin-left: 5px; width: 5px;"></el-button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div style="display: flex; justify-content: end; align-items: center;">
                        <el-button type="primary" @click="handlePreView" style="margin-top: 10px;"> 预览 </el-button>
                    </div>
                </div>

            </el-form>
            <el-divider />

            <!-- <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataNine.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataNine.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataNine.selectValue">
                        <el-option v-for="(item, index) in _font_style_list" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider /> -->

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataTen.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataTen.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataTen.selectValue" filterable  allow-create>
                        <el-option v-for="(item, index) in _font_style_list" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <el-divider />
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataEleven.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataEleven.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataEleven.selectValue" filterable  allow-create>
                        <el-option v-for="(item, index) in _font_size_list" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

        </el-card>

        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API输出</span>
            </template>

            <div v-for="(item, index) in APIOutput" :key="index">
                <el-form label-width="100">
                    <el-form-item label="名称：">
                        <el-input v-model="item.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-input v-model="item.type" disabled></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <!-- // 预览 -->
        <el-dialog v-model="dialogPreView" title="预览" width="800">
            <table>
                <thead>
                    <tr>
                        <th v-for="(item, index) in popShowData.APIInput.dataNine.dataList" :key="index"
                            :style="{ 'width': `${item.width}vw` }">
                            {{ item.title }}
                        </th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, defineProps, onMounted, watch } from 'vue';
import flowNodesStore from '@/store/modules/flowNodes'
import defaultAttribute from '../utils/attribute'
const { _font_size_list, _font_color_list, _font_style_list } = defaultAttribute

const { proxy } = getCurrentInstance();
const flowNodes = flowNodesStore()
const props = defineProps({
    // Define props here
    showFlowData: {
        type: Object,
    },
    drawer: {
        type: Boolean,
    },
    recapture: {
        type: Boolean
    },
    inputSelectNodeIds: {
        type: Array
    }
});

const dialogPreView = ref(false)
const popShowData = ref({
    APIBaseData: {
        name: '明细栏',
        desc: '基于图纸文件和图纸页，通过',
    },
    APIState: {
        name: '成功',
        type: '布尔'
    },
    APIInput: {
        dataOne: {
            name: '3D数据',
            type: '3D文档',
            selectValue: '',
        },
        dataTwo: {
            name: '图纸文件',
            type: '2D文档',
            selectValue: '',
        },
        dataThree: {
            name: '图纸图页',
            type: '图页',
            selectValue: '',
        },
        dataFour: {
            name: '标题字体',
            type: '枚举',
            selectValue: '',
        },
        dataFive: {
            name: '标题字号',
            type: '枚举',
            selectValue: '',
        },
        dataSix: {
            name: '内容字体',
            type: '枚举',
            selectValue: '',
        },
        dataSeven: {
            name: '内容字号',
            type: '枚举',
            selectValue: '',
        },
        dataEight: {
            name: '实例位置',
            type: '文本',
            checkValue: '',
            y_data: '',
            x_data: '',
        },
        dataNine: {
            name: '列定义',
            type: '多文本',
            dataList: [],
        },

        dataTen: {
            name: '球标字体',
            type: '文本',
            selectValue: '',
        },
        dataEleven: {
            name: '球标字号',
            type: '枚举',
            selectValue: '',
        },
    },
    APIOutput: []
})

const three_data_selectList = computed(() => {
    let nodeList = flowNodes.getFlowNodes();
    const resultList = nodeList.filter(node => props.inputSelectNodeIds.includes(node.id)).filter(node => node.data.methodName === 'getCurrentData' || node.data.methodName === 'loop');

    // 遍历结果列表，根据 methodName 添加 type 属性
    resultList.forEach(node => {
        if (node.data.methodName === 'getCurrentData') {
            node.data.type = '3d';
        } else if (node.data.methodName === 'loop') {
            node.data.type = 'loop';
        }
    });

    return resultList;
});


const drawing_documents_selectList = computed(() =>
    flowNodes.getFlowNodes()
        .filter(node => props.inputSelectNodeIds.includes(node.id) && node.data?.methodName === 'createDrawing')
        .map(node => {
            const newNode = JSON.parse(JSON.stringify(node));
            const label = newNode.data?.label;
            if (typeof label === 'string') {
                newNode.data.label = `${label}-图纸页`;
            }
            return newNode;
        })
);

const originalDrawingSheetSelectList = computed(() =>
    flowNodes.getFlowNodes()
        .filter(node =>
            props.inputSelectNodeIds.includes(node.id) &&
            node.data?.methodName === 'createSheet'
        )
        .map(node => {
            const { data } = node;
            const newLabel =  data.label;
            return {
                ...node,
                data: {
                    ...data,
                    label: newLabel
                }
            };
        })
);

const drawing_sheet_selectList = computed(() => [
    ...drawing_documents_selectList.value,
    ...originalDrawingSheetSelectList.value
]);
let contrastList = [
    { label: '零件编号', value: 'PartNumber' },
    { label: '版本', value: 'Revision' },
    { label: '定义', value: 'Definition' },
    { label: '术语', value: 'Nomenclature' },
    { label: '来源', value: 'Source' },
    { label: '描述', value: 'Description' },
    { label: '数量', value: 'Count' },
    { label: '层级', value: 'Level' },
    { label: '质量', value: 'Mass' },
]
const attribute_selectList = computed(() => {
    let resultList = [
        { id: '', label: '序号', value: 'NO' }
    ];
    let attributeNodeList = []
    let nodeList = flowNodes.getFlowNodes();
    const getAllChidrenPropertyList = nodeList.filter(node => node.data.methodName == 'getAllChidrenProperty')
    const getOneLvlChidrenPropertyList = nodeList.filter(node => node.data.methodName == 'getOneLvlChidrenProperty')

    if (getAllChidrenPropertyList.length > 0) {
        attributeNodeList = getAllChidrenPropertyList;
    } else if (getOneLvlChidrenPropertyList.length > 0) {
        attributeNodeList = getOneLvlChidrenPropertyList;
    }

    if (attributeNodeList.length > 0) {
        if (attributeNodeList[0].data.popShowData) {

            let attribute_obj = attributeNodeList[0];

            if (attribute_obj.data.popShowData.APIInput.dataTwo) {
                if (attribute_obj.data.popShowData.APIInput.dataTwo.checkList.length > 0) {
                    attribute_obj.data.popShowData.APIInput.dataTwo.checkList.forEach(element => {
                        let obj = {
                            id: attribute_obj.id,
                            label: '',
                            value: '',
                        }
                        obj.value = element;
                        const matchedItem = contrastList.find(item => item.value == element);
                        if (matchedItem) {
                            obj.label = matchedItem.label;
                        }
                        resultList.push(obj)
                    });
                }

            }

            if (attribute_obj.data.popShowData.APIInput.dataFour) {
                if (attribute_obj.data.popShowData.APIInput.dataFour.checkList.length > 0) {
                    attribute_obj.data.popShowData.APIInput.dataFour.checkList.forEach(element => {
                        let obj = {
                            id: attribute_obj.id,
                            label: '',
                            value: '',
                        }
                        obj.value = element;
                        const matchedItem = contrastList.find(item => item.value == element);
                        if (matchedItem) {
                            obj.label = matchedItem.label;
                        }
                        resultList.push(obj)
                    });
                }

            }

            if (attribute_obj.data.popShowData.APIInput.dataThree) {
                if (attribute_obj.data.popShowData.APIInput.dataThree.zdyAttributeList.length > 0) {
                    attribute_obj.data.popShowData.APIInput.dataThree.zdyAttributeList.forEach(element => {
                        let obj = {
                            id: attribute_obj.id,
                            label: '',
                            value: '',
                        }
                        obj.label = element;
                        obj.value = element;
                        resultList.push(obj)
                    });
                }

            }


        }
    }
    return resultList;
});

const node_data = computed(() => {
    let returnObj = {
        //固定值
        positionFlag: props.showFlowData.data.positionFlag,
        methodName: props.showFlowData.data.methodName,

        // 自定义属性
        input3DData: popShowData.value.APIInput.dataOne.selectValue,
        input3DType: '',
        input2DData: popShowData.value.APIInput.dataTwo.selectValue,
        sheetName: popShowData.value.APIInput.dataThree.selectValue,
        pos: '' + popShowData.value.APIInput.dataEight.x_data + ',' + popShowData.value.APIInput.dataEight.y_data,
        frontName: popShowData.value.APIInput.dataSix.selectValue,
        frontSize: popShowData.value.APIInput.dataSeven.selectValue,
        titleFrontName: popShowData.value.APIInput.dataFour.selectValue,
        titleFrontSize: popShowData.value.APIInput.dataFive.selectValue,
        ballFrontName: popShowData.value.APIInput.dataTen.selectValue,
        ballFrontSize: popShowData.value.APIInput.dataEleven.selectValue,
        columns: [],
    }
    if (popShowData.value.APIInput.dataOne.selectValue) {
        let find_data = three_data_selectList.value.find(item => item.id == popShowData.value.APIInput.dataOne.selectValue);
                if(find_data) {
            obj.input3DType = find_data.data.type;
        }
    }
    popShowData.value.APIInput.dataNine.dataList.forEach((item) => {
        let attribute_obj = attribute_selectList.value.find(element => element.value == item.selectValue)

        let obj = {
            title: item.title,
            width: item.width,
            value: item.selectValue,
            source: '',
        }

        if (attribute_obj) {
            obj.source = attribute_obj.id;
        }
        returnObj.columns.push(obj);
    })

    return returnObj;
});

const APIOutput = computed(() => {
    const allCheckLists = [{
        name: '明细栏',
        type: '表格'
    }, {
        name: '球标',
        type: '标注'
    }];

    // popShowData.value.APIInput.dataFive.checkList.forEach((item) => {
    //     let obj = {
    //         name: item,
    //         type: '视图'
    //     }
    //     allCheckLists.push(obj);
    // });
    return allCheckLists;
});

// watch(() => props.drawer, (val) => {
//     if (!val) {
//         setData();// 更新数据
//     }
// }, { deep: true }, { immediate: true })

watch(() => popShowData.value, (val) => {
    if (val) {
        setData();// 更新数据
    }
}, { deep: true }, { immediate: true })

watch(() => props.recapture, (val) => {
    reset();
    getList();
}, { deep: true }, { immediate: true })


watch(() => APIOutput.value, (val) => {
    popShowData.value.APIOutput = val
})

onMounted(() => {
    getList();
    setData();
})
const getList = () => {
    if (props.showFlowData.id) {
        if (flowNodes.getFlowNodesById(props.showFlowData.id)) {
            let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
            if (nodeData.data.popShowData) {
                popShowData.value = JSON.parse(JSON.stringify(nodeData.data.popShowData))
            }
        }
    }
}
const setData = () => {
    let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
    // 如果找到了该节点，则更新数据
    if (nodeData) {
        nodeData.data.popShowData = popShowData.value
        nodeData.data.data = node_data.value
        flowNodes.setFlowNodesById(props.showFlowData.id, nodeData)
    }
}
const reset = () => {
    popShowData.value = {
        APIBaseData: {
            name: '明细栏',
            desc: '基于图纸文件和图纸页，通过',
        },
        APIState: {
            name: '成功',
            type: '布尔'
        },
        APIInput: {
            dataOne: {
                name: '3D数据',
                type: '3D文档',
                selectValue: '',
            },
            dataTwo: {
                name: '图纸文件',
                type: '2D文档',
                selectValue: '',
            },
            dataThree: {
                name: '图纸图页',
                type: '图页',
                selectValue: '',
            },
            dataFour: {
                name: '标题字体',
                type: '枚举',
                selectValue: '',
            },
            dataFive: {
                name: '标题字号',
                type: '枚举',
                selectValue: '',
            },
            dataSix: {
                name: '内容字体',
                type: '枚举',
                selectValue: '',
            },
            dataSeven: {
                name: '内容字号',
                type: '枚举',
                selectValue: '',
            },
            dataEight: {
                name: '实例位置',
                type: '文本',
                checkValue: '',
                y_data: '',
                x_data: '',
            },
            dataNine: {
                name: '列定义',
                type: '多文本',
                dataList: [],
            },

            dataTen: {
                name: '球标字体',
                type: '文本',
                selectValue: '',
            },
            dataEleven: {
                name: '球标字号',
                type: '枚举',
                selectValue: '',
            },
        },
        APIOutput: []
    }
}


const handleAddAttribute = () => {
    popShowData.value.APIInput.dataNine.dataList.push({
        title: '',
        width: '',
        selectValue: '',
    })
}

const handleDeleteAttribute = (item, index) => {
    popShowData.value.APIInput.dataNine.dataList.splice(index, 1)
}

const handlePreView = () => {
    dialogPreView.value = true;
    if (popShowData.value.APIInput.dataNine.dataList.length <= 0) {
        ElMessage.warning('请先添加列定义');
    }
}
</script>

<style scoped>
.checkbox-item-sty {
    display: block;
}

::v-deep .el-checkbox__label {
    font-size: 16px;
    /* 你可以根据需要调整字体大小 */
}

.table-sty {
    border-collapse: collapse;
    /* 合并边框 */
    width: 100%;
    /* 表格宽度 */
    margin-top: 10px;
}

th,
td {
    border: 1px solid #ccc;
    /* 边框 */
    padding: 8px;
    /* 内边距 */
    text-align: center;
    /* 文字居中 */
}

th {
    background-color: #f5f5f5;
    /* 表头背景色 */
    font-weight: 500;
    /* 表头字体粗细 */
}
</style>